<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>减脂饮食规划</title>
    <script src="js/vue.min.js"></script> 
	<!-- 引入样式 -->
	<link rel="stylesheet" href="css/elementui.css">
	<!-- 引入组件库 -->
	<script src="js/index.js"></script>
	<link rel="stylesheet" href="./css/index.css" />
  </head>

  <body>
	  <h1>减脂饮食规划</h1>
	  <div id="app">  
		<div class="form">
			<el-form ref="form" :model="form" label-width="100px"> 
				<el-form-item label="性别:">
					<!-- 身高、体重、年龄、性别 -->
				    <el-radio-group v-model="form.gender">
				      <el-radio label="男士" border size="medium"></el-radio>
				      <el-radio label="女士" border size="medium"></el-radio>
				    </el-radio-group>
				</el-form-item> 
				<el-form-item label="年龄:">
				     <el-input-number :min="18" size="medium" v-model="form.age"></el-input-number>
				</el-form-item>
				<el-form-item label="体重kg:"> 
				     <el-input-number :min="40" size="medium" v-model="form.weight"></el-input-number>
				</el-form-item>
				<el-form-item  label="减脂目标kg:">
				     <el-input-number :min="1" size="medium" v-model="form.globa"></el-input-number>
				</el-form-item>
			</el-form>
			<button id="submit" @click="submit">定制方案</button> 
		</div>
		<el-drawer 
		  title="我是标题"
		  :with-header="false"
		  size="60%"
		  :visible.sync="drawer"
		  :direction="direction">
		  <div class="drawer">
		  	<el-descriptions title="减脂饮食方案" border> 
		  	    <el-descriptions-item label="碳水化合物摄入">{{carbohydrateIn}}kal</el-descriptions-item>
		  	    <el-descriptions-item label="蛋白质摄入">{{proteinIn}}kal</el-descriptions-item>
		  	    <el-descriptions-item label="脂肪摄入">{{fatIn}}kal</el-descriptions-item>
				<el-descriptions-item label="每日进食总热量">{{eatFoodEngryByDay}}kal</el-descriptions-item> 
		  	</el-descriptions> 
			<el-descriptions class="descriptions" title="每日摄入重量" border>
				<el-descriptions-item label="碳水化合物摄入">{{carbohydrateG}}g</el-descriptions-item>
				<el-descriptions-item label="蛋白质摄入">{{proteinG}}g</el-descriptions-item>
				<el-descriptions-item label="脂肪摄入">{{fatG}}g</el-descriptions-item>
			</el-descriptions> 
			<el-descriptions class="descriptions" title="早餐" border></el-descriptions>
			 <el-table
				 :data="breakfast"
				 stripe
				 style="width: 100%"> 
				 <el-table-column
				   prop="name"
				   label="食物名称"
				   width="120">
				 </el-table-column>
				 <el-table-column
				   prop="weight"
				   label="重量(g)"
				   width="100">
				 </el-table-column>
				 <el-table-column
				   prop="carbohydrate"
				   label="碳水化合物(g)"
				   width="120">
				 </el-table-column>
				 <el-table-column
				   prop="protein"
				   label="蛋白质(g)"
				   width="100">
				 </el-table-column>
				 <el-table-column
				   prop="fat"
				   label="脂肪(g)"
				   width="100">
				 </el-table-column>
				 <el-table-column
				   prop="kcal"
				   label="热量(kcal)">
				 </el-table-column>
			</el-table>
			<el-descriptions class="descriptions" title="午餐" border></el-descriptions> 
			<el-table
				 :data="lunch"
				 stripe
				 style="width: 100%"> 
				 <el-table-column
				   prop="name"
				   label="食物名称"
				   width="120">
				 </el-table-column>
				 <el-table-column
				   prop="weight"
				   label="重量(g)"
				   width="100">
				 </el-table-column>
				 <el-table-column
				   prop="carbohydrate"
				   label="碳水化合物(g)"
				   width="120">
				 </el-table-column>
				 <el-table-column
				   prop="protein"
				   label="蛋白质(g)"
				   width="100">
				 </el-table-column>
				 <el-table-column
				   prop="fat"
				   label="脂肪(g)"
				   width="100">
				 </el-table-column>
				 <el-table-column
				   prop="kcal"
				   label="热量(kcal)">
				 </el-table-column>
			</el-table>
			<el-descriptions class="descriptions" title="晚餐" border></el-descriptions> 
			<el-table
				 :data="dinner"
				 stripe
				 style="width: 100%"> 
				 <el-table-column
				   prop="name"
				   label="食物名称"
				   width="120">
				 </el-table-column>
				 <el-table-column
				   prop="weight"
				   label="重量(g)"
				   width="100">
				 </el-table-column>
				 <el-table-column
				   prop="carbohydrate"
				   label="碳水化合物(g)"
				   width="120">
				 </el-table-column>
				 <el-table-column
				   prop="protein"
				   label="蛋白质(g)"
				   width="100">
				 </el-table-column>
				 <el-table-column
				   prop="fat"
				   label="脂肪(g)"
				   width="100">
				 </el-table-column>
				 <el-table-column
				   prop="kcal"
				   label="热量(kcal)">
				 </el-table-column>
			</el-table>
		  </div> 
		</el-drawer>
		<!-- 检测脚本取值，勿动 -->
		<input type="hidden" id="compare1" :value="compare1">
		<input type="hidden" id="compare2" :value="compare2">
		<input type="hidden" id="compare3" :value="compare3">
		<input type="hidden" id="dinner" :value="desdinner">
    </div> 
  </body>
  <script src="./js/foods.js"></script>
  <script src="./js/axios.js"></script>
  <script> 
    const app = new Vue({
	  el: "#app",
	  data: { 
		drawer: false,
		direction: 'rtl',
		form: { 
			age: 20,
			gender: "男士",
			globa: 5,
			weight: 70
		},
		breakfast: [],
		lunch: [],
		dinner: [],
		eatFoodEngryByDay: 0,
		carbohydrateIn: 0, 
		proteinIn: 0,
		fatIn: 0,
		carbohydrateG: 0,
		proteinG: 0,
		fatG: 0,
		compare1: 0,
		compare2: 0,
		compare3: 0,
		desdinner: ''
	  }, 
	  mounted() {
		  // TODO 早餐数据获取
		   
		  // TODO 午餐数据获取 
		  
		  // TODO 晚餐数据获取 
		  // 早餐数据获取
		  axios.get('./js/breakfast.json').then(res => { 
		  	this.breakfast = res.data;
		  })
		  // 午餐数据获取
		  axios.get('./js/lunch.json').then(res => {
		  	this.lunch = res.data;
		  })
		  // 晚餐数据获取
		  axios.get('./js/dinner.json').then(res => {
		  	this.dinner = res.data;
		  })
	  },
	  methods: {
			submit() {
				this.drawer = true;
				// 目标体重
				let desWeight = this.form.weight - this.form.globa
				// 进食的热量每日
				this.eatFoodEngryByDay = Math.floor(desWeight * 26.4) 
				// 碳水化合每日物摄入
				this.carbohydrateIn = Math.floor(this.eatFoodEngryByDay * 0.5)
				// 蛋白质每日摄入
				this.proteinIn = Math.floor(this.eatFoodEngryByDay * 0.35)
				// 脂肪每日摄入 
				this.fatIn = Math.floor(this.eatFoodEngryByDay * 0.15)
				// 碳水每日摄入重量
				this.carbohydrateG = Math.floor(this.carbohydrateIn / 4)
				// 蛋白每日摄入重量
				this.proteinG = Math.floor(this.proteinIn / 4)
				// 脂肪每日摄入重量
				this.fatG = Math.floor(this.fatIn / 9) 
				// 早餐是每日摄入量的三分之一
				let breakfast_carbohydrateKg =  Math.floor(this.carbohydrateG / 3)
				let breakfast_proteinKg =  Math.floor(this.proteinG / 3)
				let breakfast_fatKg =  Math.floor(this.fatG / 3)
				 
				let breakfast_sortCarbohydrate = this.sortItem(this.breakfast,"carbohydrate",breakfast_carbohydrateKg) 
				let breakfast_sortProtein = this.sortItem(this.breakfast,"protein",breakfast_proteinKg) 
				let breakfast_sortFat = this.sortItem(this.breakfast,"fat",breakfast_fatKg) 
				
				// 碳水不大于每日中午摄入量
				breakfast_sortCarbohydrate.weight *= this.compareItem(breakfast_sortCarbohydrate,"carbohydrate",breakfast_carbohydrateKg)
				
				this.breakfast = [breakfast_sortCarbohydrate, breakfast_sortProtein, breakfast_sortFat] 
  
				// 午餐是每日摄入量的四分之一
				let lunch_carbohydrateKg =  Math.floor(this.carbohydrateG / 4)
				let lunch_proteinKg =  Math.floor(this.proteinG / 4)
				let lunch_fatKg =  Math.floor(this.fatG / 4)
				  
				let lunch_sortCarbohydrate = this.sortItem(this.lunch,"carbohydrate",lunch_carbohydrateKg)
				let lunch_sortProtein = this.sortItem(this.lunch,"protein",lunch_proteinKg) 
				let lunch_sortFat = this.sortItem(this.lunch,"fat",lunch_fatKg) 
				
				// 碳水不大于每日中午摄入量
				lunch_sortCarbohydrate.weight *= this.compareItem(lunch_sortCarbohydrate,"carbohydrate",lunch_carbohydrateKg)
				
				this.lunch = [lunch_sortCarbohydrate, lunch_sortProtein, lunch_sortFat] 
				 
				// 晚餐是每日摄入量的三分之一 
				let dinner_carbohydrateKg =  Math.floor(this.carbohydrateG / 3)
				let dinner_proteinKg =  Math.floor(this.proteinG / 3)
				let dinner_fatKg =  Math.floor(this.fatG / 3) 
				
				let dinner_sortCarbohydrate = this.sortItem(this.dinner,"carbohydrate",dinner_carbohydrateKg) 
				let dinner_sortProtein = this.sortItem(this.dinner,"protein",dinner_proteinKg) 
				let dinner_sortFat = this.sortItem(this.dinner,"fat",dinner_fatKg) 
				// 碳水不大于每日中午摄入量
				dinner_sortCarbohydrate.weight *= this.compareItem(dinner_sortCarbohydrate,"carbohydrate",dinner_carbohydrateKg)
				
				this.dinner = [dinner_sortCarbohydrate, dinner_sortProtein, dinner_sortFat] 

				// 检测脚本取值，勿动
				this.compare1 = dinner_carbohydrateKg 
				this.compare2 = dinner_proteinKg 
				this.compare3 = dinner_fatKg 
				this.desdinner = JSON.stringify(this.dinner)
			},
			// TODO 匹配最合适的食材
		    sortItem(arr, pro, compare) {
				let i = 0; 
				while( i < arr.length) {
					let tmp = (arr.sort((a,z) => {
						return z[pro] - a[pro];
					}))[i]
					if(tmp[pro] < compare) {     
						return tmp; 
					} else {
						 i++
					}
				}  
			},
			// 食材需要几份才能满足输入营养
			compareItem(cur, pro, dest) {
				if(cur[pro] < dest) {
					for(let i = 2; cur[pro] * i < dest;i++) {
						 return  i
					}
					return 1 
				}
			} 
		} 
    });
    
  const btns = document.querySelectorAll("button");
  btns.forEach(btn=>{
  	btn.addEventListener('click',function(e){
  		let x = e.clientX - e.target.offsetLeft;
  		let y = e.clientY - e.target.offsetTop;
  		let span = document.createElement('diy');
  		span.style.left = x + 'px';
  		span.style.top = y + 'px';
  		this.appendChild(span);
  		setTimeout(()=>{
  			span.remove();
  		},1000)
  	})
  })   
  </script>
</html>
